/**
 * 弹幕组件库类型定义
 * 提供完整的TypeScript支持
 */

export interface BarrageItem {
  /** 弹幕唯一ID */
  id: string
  /** 弹幕文本内容 */
  text: string
  /** 弹幕颜色 */
  color?: string
  /** 弹幕类型 */
  type?: 'scroll' | 'top' | 'bottom'
  /** 字体大小 */
  fontSize?: number
  /** 显示时间（秒） */
  time?: number
  /** 用户信息 */
  user?: string
  /** 自定义数据 */
  data?: Record<string, any>
}

export interface BarrageConfig {
  /** 弹幕透明度 (0-1) */
  opacity?: number
  /** 弹幕移动速度 (px/s) */
  speed?: number
  /** 默认字体大小 (px) */
  fontSize?: number
  /** 弹幕轨道数量 */
  trackCount?: number
  /** 轨道高度 (px) */
  trackHeight?: number
  /** 最大同时显示弹幕数 */
  maxBarrages?: number
  /** 弹幕间隔时间 (ms) */
  interval?: number
  /** 是否启用碰撞检测 */
  collision?: boolean
  /** 是否启用人脸检测避让 */
  faceDetection?: boolean
  /** 是否避免重叠 */
  avoidOverlap?: boolean
  /** 最小间距 (px) */
  minSpace?: number
  /** 最大同时显示数量 */
  maxDisplayCount?: number
  /** 轨道填充模式 */
  trackFillMode?: 'sparse' | 'normal' | 'dense' | 'maximum' | 'round-robin'
  /** 弹幕最小间隔 (px) */
  minBarrageGap?: number
  /** 调试模式 */
  debug?: boolean
  /** 显示骨架线 */
  showSkeleton?: boolean
  /** 自定义样式类名 */
  className?: string
  /** 容器样式 */
  style?: React.CSSProperties
  
  // 🆕 新增高级设置功能
  /** 弹幕密度预设 */
  density?: 'normal' | 'dense' | 'heavy'
  /** 弹幕随屏幕缩放 */
  scaleWithScreen?: boolean
  /** 防挡字幕（底部保留区域） */
  preventSubtitleBlock?: boolean
  /** 显示区域比例 (0-1) */
  displayRegion?: number
}

export interface BarrageEvents {
  /** 弹幕添加事件 */
  onAdd?: (barrage: BarrageItem) => void
  /** 弹幕移除事件 */
  onRemove?: (barrage: BarrageItem) => void
  /** 弹幕点击事件 */
  onClick?: (barrage: BarrageItem, event: MouseEvent) => void
  /** 弹幕悬停事件 */
  onHover?: (barrage: BarrageItem, event: MouseEvent) => void
  /** 容量变化事件 */
  onCapacityChange?: (active: number, max: number) => void
  /** 错误事件 */
  onError?: (error: Error) => void
}

export interface BarrageAPI {
  /** 添加弹幕 */
  add: (barrage: Omit<BarrageItem, 'id'>) => string
  /** 移除弹幕 */
  remove: (id: string) => boolean
  /** 清空所有弹幕 */
  clear: () => void
  /** 暂停弹幕 */
  pause: () => void
  /** 恢复弹幕 */
  resume: () => void
  /** 获取活跃弹幕数量 */
  getActiveCount: () => number
  /** 获取最大容量 */
  getMaxCapacity: () => number
  /** 更新配置 */
  updateConfig: (config: Partial<BarrageConfig>) => void
  /** 销毁组件 */
  destroy: () => void
}

export interface VideoBarrageProps {
  /** 视频元素引用 */
  videoRef: React.RefObject<HTMLVideoElement>
  /** 弹幕配置 */
  config?: BarrageConfig
  /** 事件回调 */
  events?: BarrageEvents
  /** 初始弹幕数据 */
  initialBarrages?: BarrageItem[]
  /** 是否启用 */
  enabled?: boolean
  /** 子元素 */
  children?: React.ReactNode
}

export interface BarrageRendererOptions {
  /** 容器元素 */
  container: HTMLElement
  /** 视频元素 */
  video?: HTMLVideoElement
  /** 配置选项 */
  config: BarrageConfig
  /** 事件回调 */
  events?: BarrageEvents
}

export interface BarrageTrack {
  /** 轨道索引 */
  index: number
  /** Y坐标 */
  y: number
  /** 轨道高度 */
  height: number
  /** 是否被占用 */
  occupied: boolean
  /** 最后使用时间 */
  lastUsed: number
  /** 活跃的弹幕列表 */
  activeBarrages: ActiveBarrage[]
  /** 最后弹幕时间 */
  lastBarrageTime: number
}

export interface ActiveBarrage extends BarrageItem {
  /** X坐标 */
  x: number
  /** Y坐标 */
  y: number
  /** 宽度 */
  width: number
  /** 轨道索引 */
  track: number
  /** 移动速度 */
  speed: number
  /** 透明度 */
  opacity: number
  /** 蒙版透明度 */
  maskOpacity?: number
  /** 是否被遮挡 */
  blocked?: boolean
  /** 创建时间 */
  createdAt: number
}

export interface DetectionArea {
  /** 左边界 */
  left: number
  /** 右边界 */
  right: number
  /** 上边界 */
  top: number
  /** 下边界 */
  bottom: number
  /** 人体关键点（可选，用于精确碰撞检测） */
  keyPoints?: Array<{ x: number; y: number }>
}

// 工具类型
export type BarrageColor = string
export type BarrageSize = 'small' | 'medium' | 'large' | number
export type BarragePosition = 'top' | 'middle' | 'bottom'
export type BarrageAnimation = 'scroll' | 'fade' | 'bounce'

// 预设配置
export interface BarragePreset {
  name: string
  config: BarrageConfig
  description?: string
}

// 预设相关类型在presets.ts中定义
